<template>
  <div ref="mapCharts" :style="{ 'width': width, 'height': height }"></div>
</template>

<script>
import echarts from 'echarts';
import macarons from './macarons.json';
import 'echarts/map/js/china.js';

import { on, off } from '../../utils/utils';

echarts.registerTheme('macarons', macarons.theme);
export default {
  name: 'MapCharts',
  props: {
    title: {
      type: String,
      default: '地图'
    },
    subTitle: String,
    legend: Array,
    height: {
      type: String,
      default: '480px'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      mapCharts: null,
      nameMap: {
        '江苏': '江苏省',
        '新疆': '新疆维吾尔自治区'
      }
    };
  },
  methods: {
    resize() {
      this.mapCharts.resize();
    },
    setValue(seriesData) {
      let min = 0;
      let max = 0;
      this.$lodash.forEach(seriesData, (item) => {
        // 最小数字
        const minItemData = this.$lodash.minBy(item.data, item => item.value);
        const minItem = minItemData ? minItemData.value : 0;
        min += minItem;

        // 最大数字
        const maxItemData = this.$lodash.maxBy(item.data, item => item.value);
        const maxItem = maxItemData ? maxItemData.value : 0;
        max += maxItem;
      });

      this.$nextTick(() => {
        this.mapCharts.setOption({
          series: seriesData,
          visualMap: {
            min: min || 0,
            max: max || 0
          },
          tooltip: {
            formatter: (params) => {
              let res = `${params.name}<br/>`;
              this.$lodash.forEach(seriesData, (item) => {
                this.$lodash.forEach(item.data, (child) => {
                  if (child.name === params.name) {
                    res += `${item.name}：${child.value}</br>`;
                  }
                });
              });
              return res;
            }
          }
        });
      });
    },
  },
  mounted() {
    const option = {
      title : {
        text: this.$props.title,
        x: 'center',
      },
      tooltip : {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: this.$props.legend,
      },
      visualMap: {
        min: 0,
        max: 0,
        x: 'left',
        y: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
      },
      series : []
    };
    // 设置副标题
    if (this.$props.subTitle && this.$props.subTitle !== '') {
      option.title.subtext = this.$props.subTitle;
      option.legend.top = '48';
    }
    // 系列列表
    const series = [];
    this.$lodash.forEach(this.$props.legend, (seriesName) => {
      series.push({
        name: seriesName,
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
          show: true
        },
        data:[],
        // 自定义名称映射
        nameMap: this.nameMap
      });
    });
    option.series = series;

    this.$nextTick(() => {
      this.mapCharts = echarts.init(this.$refs.mapCharts, 'macarons');
      this.mapCharts.setOption(option);
      on(window, 'resize', this.resize);
    });
  },
  beforeDestroy() {
    off(window, 'resize', this.resize);
  },
};
</script>

<style scoped>

</style>
